<template>
  <view class="page-container">
    <headerBar
        :isFixed="true"
        :navBarBgc="headerBgc"
    ></headerBar>
    <view class="swiper-container">
      <wd-swiper
          :list="productDetailObj.pictures"
          autoplay
		  value-key="imgUrl"
          :indicator="{ type: 'fraction' }"
          custom-class="custom-image"
          indicatorPosition="bottom-right"
          height="375"
      ></wd-swiper>
    </view>
    <view class="product-basic-info-container">
      <view class="header-container flex justify-between items-center">
        <view class="price">￥ {{productPrice}}</view>
        <wd-icon name="service" size="33px" color="#2b2b24" @click="handleCallPhone"></wd-icon>
      </view>
      <view class="product-name">
        {{productDetailObj.name}} {{productTypePurchaseContent}}
      </view>
      <view class="rule-container flex items-center">
        <view class="send-back-rule">
          破损包退
        </view>
        <view class="express-rule">
          快递：包邮
          <text class="supplement-note">部分地区需补运费差价</text>
        </view>
      </view>
      <view class="type-scale-choice-container">
        <view class="type-scale-item flex items-center">
          <view class="label">可选类型</view>
          <view class="flex-1">
            <view
                v-for="(item,index) in productDetailObj.typeList"
                :key="item.typeId"
                :class="['type-scale-content',item.typeId === productTypeId ? 'selected-type' : '']"
                @click="selectProductType(item,index)"
            >
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="type-scale-item flex items-center">
          <view class="label">可选规格</view>
          <view class="flex-1" v-if="productDetailObj.typeList && productDetailObj.typeList.length > 0">
            <view
                v-for="skuItem in productDetailObj.typeList[productTypeActiveIndex].specs"
                :key="skuItem.skuId"
                :class="['type-scale-content',skuItem.skuId === productSkuId ? 'selected-type' : '']"
                @click="selectProductSkuType(skuItem)"
            >
              {{skuItem.specsName}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="provider-container">
      <view class="provider-basic-container flex items-center justify-between">
        <view class="left-container">
          <view class="provider-name">
            {{merchantInfo.name}}
          </view>
          <view class="register-time">
            {{entireYear}}入驻
          </view>
        </view>
        <view class="entire-provider-container flex items-end" @click="navSpecialtyProvider">
          <i class="iconfont icon-w_shangdian"></i>
          <text>进店逛逛</text>
        </view>
      </view>
      <view class="provider-location-container flex items-baseline justify-between">
        <view class="location flex-1">
          {{merchantInfo.address}}
        </view>
        <view class="operation-container flex ">
          <!--          <view class="nav-container flex items-baseline mr10">
                      <i class="iconfont icon-w_shangdian"></i>
                      <text>地图</text>
                    </view>-->
          <view class="nav-container flex items-end" @click="handleCallPhone">
            <wd-icon name="service" size="22px" color="#1b9c61"></wd-icon>
            <text>联系我们</text>
          </view>
        </view>
      </view>
    </view>

    <view class="tab-container">
      <wd-sticky :offset-top="80">
        <view class="tab-container flex items-top justify-around">
          <view
              v-for="(item,index) in tabList"
              :key="index"
              :class="['tab-item',activeTabIndex === index ? 'choice-tab-item' : '']"
              @click="handleTab(index)"
          >{{item}}</view>
        </view>
		<view>
			<mp-html :content="activeTabIndex == 0 ? explainContentObj.productDetailExplain : explainContentObj.purchaseExplain"></mp-html>
		</view>
      </wd-sticky>
    </view>
    <!--  产品详情  -->
    <view class="product-description-container" id="description">
      <wd-collapse
          viewmore
          v-model="showDescriptionContent"
          use-more-slot
          custom-more-slot-class="more-slot"
          custom-body-class="custom-body-class"
          @change="handleShowProductDesc"
      >
        <rich-text :nodes="explainContentObj.productDetailExplain"></rich-text>
        <template #more>
          <view
              class="more-container pt20 pb30"
          >
            <view
                class="flex items-end justify-center"
                v-show="!showDescriptionContent"

            >
              <text>查看全部</text>
              <wd-icon name="arrow-down" size="22px"></wd-icon>
            </view>
            <view
                class="flex items-end justify-center"
                v-show="showDescriptionContent"
            >
              <text>收起</text>
              <wd-icon name="arrow-up" size="22px"></wd-icon>
            </view>
          </view>
        </template>
      </wd-collapse>
    </view>
    <!--  购买须知  -->
    <view class="purchase-note-container" id="purchase">
      <view class="title">
        购买须知
      </view>
      <!-- <view class="purchase-note-content">
        {{explainContentObj.purchaseExplain}}
      </view> -->
	  <mp-html :content="explainContentObj.purchaseExplain"></mp-html>
    </view>
    <view class="safe-container"></view>
    <view class="buy-container">
      <wd-button
          custom-class="custom-btn-class"
          @click="navReservation"
      >
        立即购买
      </wd-button>
    </view>
  </view>
</template>

<script setup>
import {onMounted,getCurrentInstance,ref } from "vue";
import headerBar from "@/components/HeaderBar/index.vue";
import {specialtyProductDetail, specialtyProductExplainContent} from "@/api/specialty";
import dayjs from "dayjs";


const instance = getCurrentInstance()

const tabList = ref(["产品详情","购买须知"]);
const merchantInfo = ref({
  address: "",
  contactMobile: "",
  createTime: "",
  id: "",
  name: ""
});
const showDescriptionContent = ref(false);
const descriptionTop = ref(0);
const purchaseTop = ref(0);
const activeTabIndex = ref(0);
const headerBgc = ref("transparent");
const productId = ref("");
const productDetailObj = ref({});
const entireYear = ref("");
const explainContentObj = ref({
  productDetailExplain: "",
  purchaseExplain: ""
});
const productTypeActiveIndex = ref(0);
const productPrice = ref(0);
const productName = ref('')
const productTypeId = ref("");
const productSkuId = ref("");
const typeName = ref('');
const specsName = ref('');
const productTypePurchaseContent = ref("");

const selectProductType = (typeItem,index) => {
  productTypeActiveIndex.value = index;
  let {specs, id:typeId, name:typeNo} = typeItem;
  productTypeId.value = typeId;
  let {price, id:skuId, specsName:specsNo} = specs[0];
  productPrice.value = price;
  productSkuId.value = skuId;
  specsName.value = specsNo;
  typeName.value = typeNo;
  productTypePurchaseContent.value = typeNo + specsNo;
};
const selectProductSkuType = (skuItem) => {
  let {price, id:skuId, specsName:specsNo} = skuItem;
  productPrice.value = price;
  productSkuId.value = skuId;
  let {name:typeNo} = productDetailObj.value.typeList[productTypeActiveIndex.value];
  specsName.value = specsNo;
  typeName.value = typeNo;
  productTypePurchaseContent.value = typeNo + specsNo;
};
const handleShowProductDesc = (event) => {
  let {value} = event;
  showDescriptionContent.value = value;
};
const handleTab = (index) => {
  activeTabIndex.value = index;
  switch (index) {
    case 0:
      uni.pageScrollTo({
        scrollTop: descriptionTop.value
      });
      break;
    case 1:
      uni.pageScrollTo({
        scrollTop: purchaseTop.value
      });
      break;
  }
};
const navSpecialtyProvider = () => {
  let {name} = productDetailObj.value;
  uni.navigateTo({
    url:`/specialtySubPack/pages/specialtyProvider/index?productId=${productId.value}&providerName=${name}`
  })
};
const navReservation = () => {
  uni.navigateTo({
    url:`/specialtySubPack/pages/specialtyReservation/index?productPrice=${productPrice.value}&specsId=${productSkuId.value}&typeId=${productTypeId.value}&productId=${productId.value}&merchantId=${merchantInfo.value.id}&specsName=${specsName.value}&typeName=${typeName.value}&merchantName=${merchantInfo.value.name}&typeData=${productTypePurchaseContent.value}`
  })
};
const handleCallPhone = () => {
  uni.makePhoneCall({
    phoneNumber: merchantInfo.value.contactMobile
  })
};
const querySpecialtyProductDetail = async () => {
  await specialtyProductDetail({productId:productId.value}).then(res => {
    let {result} = res;
    productDetailObj.value = result;
    let {merchant, typeList, content, know, name} = result;
    merchantInfo.value = merchant;
	productName.value = name
    entireYear.value = dayjs(merchant.createTime).format("YYYY");
	explainContentObj.value = {productDetailExplain: content, purchaseExplain: know};
    if(typeList && typeList.length) {
      let {name:typeNo,id:typeId,specs} = typeList[0];
      let {id:skuId,price,specsName:specsNo} = specs[0];
      productTypeId.value = typeId;
      productSkuId.value = skuId;
      productPrice.value = price;
	  specsName.value = specsNo;
	  typeName.value = typeNo;
      productTypePurchaseContent.value = typeNo + specsNo;
    };
  });
};


onPageScroll((res) => {
  let {scrollTop} = res;
  if(scrollTop >= 100) {
    headerBgc.value = "#ffffff";
  } else {
    headerBgc.value = "transparent";
  }
  if(scrollTop <= descriptionTop.value) {
    activeTabIndex.value = 0;
  } else if(scrollTop >= purchaseTop.value - 100){
    activeTabIndex.value = 1;
  }
});
onLoad((options) => {
  console.log(options,'options');
  let {productId: _productId} = options;
  productId.value = _productId;
  querySpecialtyProductDetail();
});
onMounted(async() => {
  let query = uni.createSelectorQuery().in(instance.proxy);
  query
      .select("#description")
      .boundingClientRect((data) => {
        descriptionTop.value = data.top - 100;
        console.log("节点离页面顶部的距离为" + data.top);
      })
      .exec();

  query
      .select("#purchase")
      .boundingClientRect((data) => {
        purchaseTop.value = data.top - 100;
        console.log("节点离页面顶部的距离为" + data.top);
      })
      .exec();
})
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #eef0df;
  .swiper-container {
    --wot-swiper-radius: 0;
  }
  .product-basic-info-container {
    padding: 58rpx 27.5rpx 0 27.5rpx;
    border-radius: 0 0 10rpx 10rpx;
    background-color: #fff;
    .header-container {
      .price {
        font-size: 50rpx;
        font-weight: bold;
        color: #AA5414;
      }
    }
    .product-name {
      padding: 29rpx 0 21.5rpx 0;
      font-size: 33rpx;
      color: #2B2B24;
    }
    .rule-container {
      .send-back-rule {
        padding: 8.5rpx 17.5rpx;
        margin-right: 21rpx;
        font-size: 25rpx;
        font-weight: 500;
        border: 1rpx solid #1B9C61;
        border-radius: 10rpx;
        color: #1B9C61;
      }
      .express-rule {
        padding: 8.5rpx 17.5rpx;
        font-size: 25rpx;
        font-weight: 500;
        border: 1rpx solid #1B9C61;
        border-radius: 10rpx;
        color: #AA5413;
        .supplement-note {
          margin-left: 13rpx;
          color: #A7A7A7;
        }
      }
    }
    .type-scale-choice-container {
      padding: 46.5rpx 0 20.5rpx 0;
      .type-scale-item {
        font-size: 29rpx;
        .label {
          margin-right: 39.5rpx;
        }
        .type-scale-content {
          display: inline-block;
          padding: 7.5rpx 16rpx;
          border-radius: 10rpx;
          background-color: #EEF0DF;
          margin-bottom: 20rpx;
          margin-left: 20rpx;
        }
        .selected-type {
          color: #EEF0DF;
          background-color: #1B9C61;
        }
      }
    }
  }
  .provider-container {
    margin: 35rpx 0;
    padding: 50rpx 28.5rpx 46rpx 28.5rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
    .provider-basic-container {
      .left-container {
        .provider-name {
          font-size: 33rpx;
          font-weight: bold;
        }
        .register-time {
          width: 138rpx;
          font-size: 29rpx;
          margin-top: 22.5rpx;
          border-radius: 10rpx;
          border: 1rpx solid #1B9C61;
          text-align: center;
          color: #1B9C61;
        }
      }
      .entire-provider-container {
        padding: 14rpx 30rpx;
        border-radius: 10.5rpx;
        border: 1rpx solid #C0C2B3;
        background: #EEF0DF;
        .icon-w_shangdian {
          font-size: 50rpx;
          margin-right: 16rpx;
          color: #d33700;
        }
        text {
          font-size: 33rpx;
          font-weight: bold;
          color: #2B2B24;
        }
      }
    }
    .provider-location-container {
      padding-top: 37.5rpx;
      .location {
        height: 36rpx;
        font-size: 25rpx;
        width: 55%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #2B2B24;
      }
      .operation-container {
        .nav-container {
          .icon-w_shangdian {
            font-size: 50rpx;
            color:#1b9c61;
          }
          text {
            font-size: 25rpx;
          }
        }
      }
    }
  }
  .tab-container {
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    background: #FFFFFF;
    .tab-container {
      padding: 50rpx 0;
      font-size: 33rpx;
      background: #FFFFFF;
      .tab-item {
        position: relative;
        width: 50vw;
        text-align: center;
        color: #2B2B24;
      }
      .choice-tab-item {
        font-weight: 800;
        color: #1B9C61;
      }
      .choice-tab-item:after {
        position: absolute;
        content: "";
        margin-top: 10rpx;
        display: block;
        width: 65rpx;
        height: 4rpx;
        left: 50%;
        margin-left: -32.5rpx;
        background-color: #24a067;
      }
    }
  }
  .product-description-container {
    padding: 0 28.5rpx;
    border-bottom-right-radius: 10rpx;
    border-bottom-left-radius: 10rpx;
    background-color: #fff;
    .desc-content {
      height: 300rpx;
      background-color: #fff;
    }
    .more-container {
      text-align: center;
      width: 84vw;
    }
  }
  .purchase-note-container {
    margin: 35rpx 0;
    padding: 34rpx 28.5rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
    .title {
      padding-bottom: 33.5rpx;
      font-size: 33rpx;
      font-weight: 800;
    }
    .purchase-note-content {
      font-size: 25rpx;
      color: #333333;
    }
  }
  .safe-container {
    height: 150rpx;
  }
  .buy-container {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 32rpx 30rpx;
    z-index: 99999;
    box-sizing: border-box;
    background-color: #FFFFFF;
    :deep(.custom-btn-class) {
      width: 100%;
      height: 92rpx;
      line-height: 92rpx;
      border-radius: 10rpx;
      font-size: 33.5rpx;
      color: #FDFFEB;
      background-color: #1b9c61;
    }
  }
  :deep(.more-slot) {
    width: 100%;
    color: #777777;
  }
  :deep(.custom-body-class) {
    height: 300px !important;
  }
}
</style>
